<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router';
import { getSimpleArticlesByTagIdAPI } from '../../apis/apis'

const list = ref([])
const route = useRoute()
const getSimpleArticlesByTagId = async () => {
  const res = await getSimpleArticlesByTagIdAPI(route.params.id)
  list.value = res.data
}
onMounted(() => {
  getSimpleArticlesByTagId()
})
</script>

<template>
  <div class="w-full min-h-screen py-10 bg-white px-10 shadow-md">
    <el-timeline>
      <el-timeline-item
        center
        placement="top"
      >
        <div class="flex items-baseline pb-5">
          <div class="text-3xl text-gray-600 font-semibold tracking-wide pr-10">{{ route.query.name }}</div>
          <div class="text-lg text-gray-400 font-semibold tracking-wide">标签下的文章</div>
        </div>
      </el-timeline-item>
      <el-timeline-item
        center
        type="success"
        :timestamp="item.createTime"
        placement="top"
        color="#808080"
        v-for="item in list"
        :key="item.id"
      >
        <RouterLink :to="{ path: '/detail/' + item.id }">
          <el-card>
            <div
              class="flex items-center justify-between border-b border-gray-300 border-dashed hover:border-b hover:border-gray-600 duration-150 cursor-pointer  py-1"
            >
              <div class="px-1">文章标题{{ item.title }}
              </div>
              <div class="px-3">{{ item.count }}字
              </div>
            </div>

          </el-card>
        </RouterLink>
      </el-timeline-item>
    </el-timeline>

  </div>

</template>

<style
  scoped
  lang='scss'
></style>